<template>
  <el-row>
    <el-col :span="24">
      <div class="box">
        <div class="box-header">
          <el-col :span="2">
            <h3 class="box-title" style="line-height: 40px;float: left;">
              培训信息
            </h3>
          </el-col>
          <!-- 搜索 -->
          <el-col :span="19">
            <!-- 搜索 -->
            <div style="line-height: 40px;float: left; margin-left: 10px;">
              <el-form :model="searchData">
                <el-input
                  v-model="searchData.issue"
                  placeholder="培训期数"
                  clearable
                  style="width: 20%; margin:auto 5px;"
                ></el-input>
                <el-input
                  v-model="searchData.company"
                  placeholder="主办单位"
                  clearable
                  style="width: 20%; margin:auto 5px;"
                ></el-input>
                <el-input
                  v-model="searchData.traindata_name"
                  placeholder="培训主题关键字"
                  show-word-limit
                  clearable
                  style="width: 20%;margin:auto 5px;"
                ></el-input>
                <el-date-picker
                  style="width: 33%"
                  v-model="time"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  align="right"
                  unlink-panels
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form>
            </div>
          </el-col>
          <el-col :span="3">
            <!-- <div style="line-height: 40px;float: left;"> -->
            <el-button class="btn-link-large add-btn" @click="Search()">
              <i class="el-icon-search el-icon--right"> 搜 索</i>
            </el-button>
            <!-- </div> -->
          </el-col>
        </div>
        <!-- 一级菜单 -->
        <div class="box-body">
          <el-table
            :data="tableData1"
            v-loading="loading"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="id"
              label="ID"
              width="60"
              sortable
            ></el-table-column>
            <el-table-column
              prop="start_time"
              label="开始时间"
              sortable
            ></el-table-column>
            <el-table-column
              prop="end_time"
              label="结束时间"
              sortable
            ></el-table-column>
            <el-table-column
              prop="issue"
              label="培训期数"
              sortable
            ></el-table-column>
            <el-table-column
              prop="traindata_name"
              label="培训主题"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="company"
              label="主办单位"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="traindata_address"
              label="培训地点"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column prop="level" label="培训级别"></el-table-column>
            <el-table-column prop="status" label="培训状态">
              <template scope="scope">
                <!-- <el-tag type="warning" v-if="scope.row.status == 0" close-transition>正在审核</el-tag> -->
                <el-tag
                  type="success"
                  v-if="scope.row.status == 1"
                  close-transition
                  width="80"
                  >培训中</el-tag
                >
                <el-tag
                  type="danger"
                  v-if="scope.row.status == 2"
                  close-transition
                  >已结束</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220">
              <template slot-scope="scope">
                <el-button
                  v-popover:popover5
                  style="background: #367fa9;"
                  size="small"
                  type="primary"
                  icon="el-icon-video-play"
                  :disabled="scope.row.status == 2"
                  @click="apply(scope.row)"
                  >申请</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="prev, pager, next"
            :page-count="total"
            style="float: right;"
          ></el-pagination>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import http from './../../../../assets/js/http'
export default {
  data() {
    return {
      tableData1: [],
      searchData: {}, // 搜索
      time: ['', ''],
      loading: true,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      currentPage: 1,
      total: 1,
      userInfo: Lockr.get('userInfo')
    }
  },
  methods: {
    // 点击培训信息下的页码，返回对应的数据
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      let data = {
        page: this.currentPage
      }
      this.GetTableData(data)
    },
    // 显示一级列表
    GetTableData(data) {
      this.loading = true
      this.apiPost('admin/Traindata/TraindataList', data).then(res => {
        this.handelResponse(res, data => {
          console.log(res.data.data)
          // res.data.data.forEach(element => {
          //   element['company_'] = element.company
          //   element['company'] = Lockr.get('schInfo')['sch_id_' + element.company]['sch_name']
          // });
          this.tableData1 = res.data.data
          this.total = Math.ceil(data.total / data.per_page)
        })
        this.loading = false
      })
    },
    // 查询培训信息
    Search() {
      if (this.time == null) {
        this.time = ['', '']
        console.log('this.time为空重置了')
      }
      let data = {
        // company: Lockr.get('schInfo')['sch_id_' + this.searchData.company]['sch_name'] ,
        company: this.searchData.company,
        traindata_name: this.searchData.traindata_name,
        start_time: this.time[0],
        end_time: this.time[1],
        issue: this.searchData.issue
      }
      console.log(data)
      this.GetTableData(data)
    },
    // 结束培训
    apply(item) {
      let data = {
        traindata_id: item.id,
        username: this.userInfo.username
      }
      this.apiPost('admin/Traindata/TraindataApply', data).then(res => {
        this.handelResponse(res, data => {
          console.log(res.data)
          _g.toastMsg('success', res.data)
          this.GetTableData()
        })
      })
    }
  },
  created() {
    _g.closeGlobalLoading()
    this.GetTableData()
  },
  computed: {},
  components: {},
  mixins: [http]
}
</script>
<style scoped>
.box {
  position: relative;
  border-radius: 3px;
  background: #fff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #3c8dbc;
}
.box-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 10px;
  min-height: 0.01%;
  overflow-x: auto;
}
.box-header {
  height: 34px;
  line-height: 34px;
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
}
.button-group {
  margin-left: 13px;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
  /*margin-right: 50px;*/
}
.box-title {
  font-weight: 700;
  letter-spacing: 3px;
  display: inline-block;
  font-size: 18px;
  margin: 0;
}
.header-button {
  background-color: #3c8dbc;
  border-color: #367fa9;
}
.table-header {
  font-weight: bold;
}
.el-button--small {
  padding: 7px 9px;
}
.el-table .showwarn {
  background: oldlace;
}
.edit-btn {
  /*background: #367fa9;*/
  width: 60px;
  height: 28px;
}
.add-btn {
  background: #367fa9;
  margin: 0 10px;
}
.add-btn:hover {
  /* background: #367fa9; */
  background: #367fa9;
}
/*  .btn-link-large {
    padding: 13px 12px;
    font-size: 14px;
}*/
/* 选中某行时的背景色*/
/*.el-table__body tr.current-row > td {
  background-color: #92cbf1 !important;
}*/

/*鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #92cbf1;
}
</style>
